import {MyNavBar} from '@/components'
import {Button} from 'antd-mobile'
import {history} from 'umi'

import './index.less'
import {useListHook} from '@/hooks'
import _getComment from './store'
import CommentItem from './components/commentItem'
import {ShowLoading} from '@/components'

function Comment() {
  const {data, showLoading, loading} = useListHook({func: _getComment})

  return (
    <div>
      <MyNavBar title='论坛'/>
      <Button type='primary' onClick={() => {
        history.push('/comment/commentAdd')
      }}>发布论坛</Button>
      <div className='comment'>
        {!loading && data.map(item => (
          <CommentItem handleClick={(id) => {
            history.push({pathname: '/comment/comment', query: {id}})
          }} key={item.id} comment={item}/>
        ))}
        <ShowLoading showLoading={showLoading} />
      </div>
    </div>
  )
}

export default Comment
